<template>
	<div>
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToOperationHome()" class="tabHeader">首页</p>
				<p @click="navTomerchant()" class="tabHeader">商家</p>
				<p @click="navToPersonal()" class="tabHeader">个人中心</p>
				<p class="tabHeader" style="color: #409eff;border-bottom: 0;">创客</p>
				<p @click="navToStartBanner()" class="tabHeader">启动广告</p>
				<p @click="navTocity()" class="tabHeader">城主页面</p>
			</div>
			<el-row style="margin-top: 20px;">
				<!-- <el-button @click="edit('addSJ')" class="btnPad " type="primary">新建</el-button> -->
				<el-button class="btnPad " type="primary" @click="edit('addCk')">增加
				</el-button>
				<el-button @click="getCkBannerList(1)" :class="[isActive==true?'btnChoose':'btnPad'] " plain>banner</el-button>
			</el-row>
		</el-row>
		<div style="margin-top: 20px;">
			<el-table :data="pageInfo.vos" v-loading="table_loading" element-table_loading-text="加载中" stripe
				 style="width: 100%">
					<el-table-column width="150" label="图片">
						<template scope="scope">
							<img class="banner" :src="scope.row.bannerIcon" style="width: 80px;height: 80px;margin: 5px 0;">
						</template>
					</el-table-column>
					<el-table-column prop="bannerName" label="名称">
					</el-table-column>
					<el-table-column label="排序值" prop="banner_Sort" width="115" sortable='custom'>
						<template scope="scope">
							<el-input v-model="scope.row.bannerSort" style="width: 80px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="跳转类型">
						<template scope="scope">
							<span>{{ findState(scope.row.bannerType,bannerType) }}</span>
						</template>
					</el-table-column>
					<el-table-column sortable='custom' prop="CRE_TIME" label="创建时间">
						<template scope="scope">
							<span>{{dateFormat(scope.row.creTime,'y-m-d h:i')}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="250">
						<template scope="scope">
							<el-button size="small" type="primary" @click="edit(scope.row.bannerCode)">编辑
							</el-button>
							<el-button size="small" type="danger" @click="handleDetele(scope.row.bannerCode)">删除
							</el-button>
							<el-button size="small" :type="scope.row.bannerState=='Y'?'danger':'success'" @click="using(scope.row)">{{scope.row.bannerState=='Y'?'禁用':'启用'}}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="paginate">
					<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
					 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
					</el-pagination>
				</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				isActive: true,
				isActive1: false,
				table_loading: false,
				formInline: {
					desc: 'DESC',
					sorts: 'BANNER_SORT + 0',
					pageSize: 10,
					bannerPosition: 'CK'
				},
				form: {
					goodsCodeList: [],
					operationCode: 6
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					vos: []
				},
				desc: 'DESC',
				sorts: 'BANNER_SORT + 0',
				bannerType: [{
					text: '单商品',
					value: 'D'
				}, {
					text: '多商品',
					value: 'DD'
				}, {
					text: '链接',
					value: 'L'
				}, {
					text: '商家',
					value: 'DP'
				}, {
					text: '文章',
					value: 'T'
				}, {
					text: '不跳转',
					value: 'B'
				}, {
					text: '商家入驻',
					value: 'S'
				}, ],
				storeGoodDtos: [],
				gridData: [],
				checked: [],
				checkAll: false,
				isIndeterminate: true,
				arr: [],
				loading: false,
				dialogTableVisible: false,
				dialogTableVisible2: false,
				f: {},
			}
		},

		activated() {
			this.getCkBannerList(1);
		},
		mounted() {

		},
		methods: {
			navToPersonal() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往个人中心
				 * @return 
				 * @createTime: 2020-8-6 18:42:09
				 */
				this.$router.push('/official/personal_center')
			},
			navToStartBanner() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往开机广告
				 * @return 
				 * @createTime: 2020-8-6 18:42:09
				 */
				this.$router.push('/official/start_bannerList')
			},
			navTocity() {
				this.$router.push('/official/city_master')
			},
			navTomerchant() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往商家
				 * @return 
				 * @createTime: 2020-8-7 14:40:53
				 */
				this.$router.push('/official/merchantOperation')
			},
			navToOperationHome() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往首页
				 * @return 
				 * @createTime: 2020-8-7 14:41:54
				 */
				this.$router.push('/official/activityOperate')
			},
			edit(id) {
				this.$router.push('/official/CKbanner_list_detail/' + id)
			},
			handleDetele(id) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param banner删除
				 * @return 
				 * @createTime: 2020-8-7 15:02:14
				 */
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('bannerDelete', {
						bannerCode: id
					}, res => {
						if (res.responseType === 'S') {
							this.showMsg('删除成功');
							this.getCkBannerList(this.pageInfo.pageNum);
						}
					});
				}).catch(() => {
			
				});
			
			},
			using(item) {
				var type = ''
				var state = ''
				let data = generateObj(item)
				if (data.bannerState == 'Y') {
					type = '禁用'
					state = 'J'
				} else {
					type = '启用'
					state = 'Y'
				}
				data.bannerState = state
				this.$confirm('确定' + type + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('bannerEdit', data, res => {
						if (res.responseType === 'S') {
							this.showMsg(type + '成功')
							this.getCkBannerList(this.pageInfo.pageNum)
						}
					});
				}).catch(() => {
			
				});
			},
			getCkBannerList(page = 1) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 获取创客banner
				 * @return 
				 * @createTime: 2020-8-7 14:57:43
				 */
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.dataApi.ajax('bannerPage', {
					pageNum: this.formInline.pageNum,
					pageSize: 10,
					sort: this.formInline.sorts,
					desc: this.formInline.desc,
					bannerPosition: this.formInline.bannerPosition
				}, res => {
					//console.log(res)
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
					}
				});
			},
			handleCurrentChange(val) {
				this.getCkBannerList(val)
			},
			setOldProbability(item) {
				item.OldProbability = item.bannerSort
			},
			editOrder(item) {
				if (Math.floor(item.bannerSort) <= 0) {
					item.bannerSort = item.OldProbability || 0;
					return false;
				}
				if (item.OldProbability == item.bannerSort) return false;
				if (!isNumber(item.bannerSort)) {
					this.showMsg('只能输入数字', 'warning')
					item.bannerSort = item.OldProbability
					return false;
				}
				if (item.bannerSort > this.pageInfo.totalRows) {
					this.showMsg('排序值不能大于总数', 'warning')
					item.bannerSort = item.OldProbability
					return false;
				}
				this.dataApi.ajax('bannerEdit', item, res => {
					if (res.responseType === 'S') {
						this.showMsg('修改成功');
						this.getCkBannerList(this.pageInfo.pageNum);
					}
				});
			},
			
		}
	}
</script>


<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
